import React, { useEffect } from "react";
import { useAppDispatch, useAppSelector } from "../../store/hooks";
import { Sidebar } from "react-vant";
import { asyncFetchList } from "../../store/classify/classSlice";
import { SubItem, Tabs } from "../../components";

const Index: React.FC = () => {
  const classifyList = useAppSelector((state) => state.classify.classifyList);
  const loading = useAppSelector((state) => state.classify.loading);
  const dispatch = useAppDispatch();

  useEffect(() => {
    dispatch(asyncFetchList());
  }, []);
  if (loading) {
    return <div>加载中...</div>;
  }
  return (
    <div>
      <Sidebar>
        {classifyList.map((v) => {
          return (
            <Sidebar.Item
              contentStyle={{ backgroundColor: "#fff", padding: "18px 10px" }}
              title={v.title}
              key={v.id}
            >
              <SubItem v={v}></SubItem>
            </Sidebar.Item>
          );
        })}
      </Sidebar>
    </div>
  );
};
export default Index;
